<template>
	<div class="datap ignore-botom-dataP">
		<div class="left_row">
			<div class="global-visualization-box-head">{{ lf_title }}
				<div class="footer-pan"></div>
			</div>
			<div class="lf_chart">
				<div class="lf_col1">
					<div class="lf_row1">常规建筑</div>
					<div class="lf_row2">
						<div class="lf_unit">{{ lf_base1 }}</div>
						<div class="lf_unit">kWh</div>
					</div>
					<div class="lf_echart">
						<uni-echarts ref="echarts10" :option="optionLAValue" canvasId="echarts10"></uni-echarts>
					</div>
				</div>
				<div class="lf_col2">
					<div class="lf_row1">近零能耗建筑</div>
					<div class="lf_row2">
						<div class="lf_unit">{{ lf_base2 }}</div>
						<div class="lf_unit">kWh</div>
					</div>
					<div class="lf_row3">
						能耗降低{{ lf_base3}} kWh
						<img :src="comstatic+'/images/Group116.png'" />
					</div>
					<div class="lf_echart1">
						<uni-echarts ref="echarts11" :option="optionLBValue" canvasId="echarts11"></uni-echarts>
					</div>
				</div>
			</div>
		</div>
		<div class="center_row">
			<div class="global-visualization-box-head">
				{{ cen_title }}
				<div class="footer-pan"></div>
			</div>
			<div class="cen_zl">
				<div class="shuiqiuchart">
					<!-- <div id="econtainer" class="liquidfill-container"></div> -->
					<div class="water" :class="'water-level-'+(liquidfillNum/10).toFixed(0)"></div>
					<div class="liquidfill-text">{{liquidfillNum}}%</div>
				</div>
				<div class="cen_right">
					<div class="cen_jian">
						<div class="cen_layout">
							<img :src="comstatic+'/reddImg/jianliang.png'" alt="" />
							<div class="cen_content">
								<span class="cen_text">减碳量</span>
								<span class="cen_unit">(kg)</span>
							</div>
						</div>
						<div class="cen_num">{{ subCarbon }}</div>
					</div>
					<div class="cen_xian">
						<div class="cen_circle"></div>
						<div class="cen_circle"></div>
					</div>
					<div class="cen_zong">
						<div class="cen_layout">
							<img :src="comstatic+'/reddImg/zongliang.png'" alt="" />
							<div class="cen_content">
								<span class="cen_text">碳排放总量</span>
								<span class="cen_unit">(kg)</span>
							</div>
						</div>
						<div class="cen_num">{{ totalCarbon }}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="right_row">
			<div class="global-visualization-box-head">{{ rg_title }}
				<div class="footer-pan"></div>
			</div>
			<div class="rt_layout">
				<div class="rt_echart">
					<uni-echarts ref="echarts3" :option="optionRValue" canvasId="echarts3" :autovalue="highlightIndex">
					</uni-echarts>
				</div>
				<view class="botright">
					<view class="right-item" v-for="(item, index) in optionRArray" :key="index">
						<view class="right-circle" :class="item.code"></view>
						<view class="right-text"> {{item.name.substring(0,2)}}
							<view class="right-value">{{item.value}}%</view>
						</view>
					</view>
				</view>
			</div>
		</div>
	</div>
</template>
<script>
	import 'echarts-liquidfill'
	import moment from "moment";
	import * as echarts from 'echarts';
	import store from '@/store/index.js';
	import $config from '@/common/config.js';
	import request from '@/common/request.js';
	import UniEcharts from '@/components/echarts-uniapp/echarts-uniapp.vue';
	import {
		optionBottomLeftAValue,
		optionBottomLeftBValue,
		optionBottomCenterValue,
		optionBottomRightValue
	} from "@/common/echart_data.js";
	import {
		fanMapArray
	} from "@/common/const_data.js";
	export default {
		components: {
			UniEcharts
		},
		data() {
			return {
				lf_title: '能耗对比',
				cen_title: '碳排放对比',
				rg_title: '当天各分项能耗数据',
				lf_base1: 285336,
				lf_base2: 25680,
				lf_base3: 0,
				lf_subVal1: 0,
				fanMapData: [],
				subCarbon: 32374,
				totalCarbon: 5633,
				optionLAValue: {},
				optionLBValue: {},
				optionCenterValue: {},
				optionRValue: {},
				optionRArray: [],
				screenFont: 12,
				currentIndex: 0,
				currentState: false,
				echartInstance: {},
				liquidfillNum: 8,
				highlightIndex: -1,
				comstatic: $config.comstatic
			}
		},
		created() {
			let that = this;
			uni.$on('hasdeviceNum', (res) => {
				if (store.state.hasLogin) {
					that.loadCarbonData();
					that.logMapByProjectId();
				}
			})
			uni.$on('refreshBotChart', (res) => {
				// 高亮当前图形
				console.log("refreshBotChart==>>>")
				if (that.highlightIndex < this.optionRArray.length - 1) {
					that.highlightIndex++
				} else {
					that.highlightIndex = 0
				}
			})
		},
		beforeDestroy() {
			console.log('beforeDestroy');
			uni.$off('hasdeviceNum');
			uni.$off('refreshBotChart');
		},
		mounted() {
			let that = this;
			this.fanMapData = fanMapArray;
			this.lf_base3 = this.lf_base1 - this.lf_base2;
			this.optionLAValue = optionBottomLeftAValue;
			this.optionLBValue = optionBottomLeftBValue;
			this.optionRValue = optionBottomRightValue;
			this.screenFont = store.state.screenWidth / 1920 * 14;
			this.optionRValue.series[0].emphasis.label.fontSize = this.screenFont;
			console.log('==screenFont>>', this.screenFont);
			this.optionRArray = optionBottomRightValue.series[0].data;
			// console.log('==optionRValue>>', JSON.stringify(this.optionRValue));
			// #ifdef H5
			// this.$nextTick(() => {
			// 	let chartDom = document.getElementById('econtainer');
			// 	that.echartInstance = echarts.init(chartDom);
			// 	that.optionCenterValue = optionBottomCenterValue;
			// 	that.echartInstance.setOption(that.optionCenterValue);
			// });
			// #endif
			setTimeout(() => {
				if (store.state.hasLogin) {
					that.loadCarbonData();
				}
			}, 1200);

			setTimeout(() => {
				if (store.state.hasLogin) {
					that.logMapByProjectId();
				}
			}, 2000);
		},
		methods: {
			logMapByProjectId() {
				let that = this;
				let postdata = {
					timeType: "day",
					startTime: moment().startOf('day').format('YYYY-MM-DD'),
					endTime: moment().startOf('day').add(1, 'day').format('YYYY-MM-DD'),
					configId: "power_all",
					projectId: $config.pcode
				};
				let headerdata = {
					"content-type": "application/json"
				};
				request.postRaw('/jeecgboot/device/data/logMapByProjectId', headerdata, postdata).then(resData => {
					console.log('logMapByProjectId==resData>>', resData);
					// alert(JSON.stringify(resData))
					if (resData.code == 200) {
						let resultData = resData.result;
						//右下角能耗数据Echarts
						let totalCount = 0;
						that.fanMapData.forEach((item) => {
							let temp = resultData[item.code]?.mdData[0]?.slice(-1)[0]?.power || 0;
							item.value = temp > 0 ? temp : 0;
							item.origin = temp > 0 ? temp : 0;
							totalCount += item.value;
						});
						console.log('totalCount==>>', totalCount)
						if (totalCount > 0) {
							that.fanMapData.forEach((item) => {
								item.value = ((item.value / totalCount) * 100).toFixed(1) || 0;
							});
						}
						store.commit('setFanMapArray', that.fanMapData);
						that.initCircleOption();
						console.log('--------fanMapData------', that.fanMapData);
					}
				}).catch(errData => {
					console.log('errData203==>>', errData)
				});
			},
			initCircleOption() {
				if (store.state.fanMapArray && store.state.fanMapArray.length > 0) {
					let fanMapArray = store.state.fanMapArray
					// console.log('fanMapArray===>>>>', JSON.stringify(fanMapArray));
					this.optionRValue = {
						...this.optionRValue,
						series: [{
							...this.optionRValue.series[0],
							data: fanMapArray
						}]
					}
					this.optionRArray = fanMapArray
				}
			},
			loadCarbonData() {
				let that = this;
				request.get('/jeecgboot/statistic/carbon/data?projectId=' + $config.pcode).then(resData => {
					// console.log('resData==>>', resData);
					if (resData.code == 200) {
						that.lf_base1 = resData.result.nomarl.toFixed(0)
						that.lf_base2 = resData.result.nearZero.toFixed(0)
						that.lf_base3 = (that.lf_base1 - that.lf_base2).toFixed(0)

						that.subCarbon = resData.result.subCarbon.toFixed(0)
						that.totalCarbon = resData.result.totalCarbon.toFixed(0)

						let ratioValue = resData.result.ratio.toFixed(2)
						that.liquidfillNum = ratioValue * 100
						// that.optionCenterValue.series[0].data = [ratioValue, ratioValue, ratioValue]
						// that.echartInstance.setOption(that.optionCenterValue);

						that.optionLAValue = {
							...that.optionLAValue,
							series: [{
								...that.optionLAValue.series[0],
								data: [that.lf_base1]
							}, {
								...that.optionLAValue.series[1],
								data: [that.lf_base1]
							}, {
								...that.optionLAValue.series[2],
								data: [that.lf_base1 * 0.9]
							}]
						}

						that.optionLBValue = {
							...that.optionLBValue,
							series: [{
								...that.optionLBValue.series[0],
								data: [that.lf_base1]
							}, {
								...that.optionLBValue.series[1],
								data: [that.lf_base2 * 1.2]
							}, {
								...that.optionLBValue.series[2],
								data: [that.lf_base2]
							}]
						}

						console.log("optionLAValue==>>", that.optionLAValue.series)

					}
				}).catch(errData => {
					console.log('errData176==>>', errData)
				});
			},
		},
	}
</script>
<style>
	@import 'index.css';
</style>
